<template>
	<view class="pices" style="background-color: #FFFFFF;">
		<u-navbar back-text="返回" title="评论详情" :background="background" title-color="#ffffff" back-icon-color="#ffffff"
		 :back-text-style="{color: '#fff'}" :border-bottom="false"></u-navbar>
		<scroll-view>
			<view class="content">
				<u-row>
					<u-col span="12">
						<u-row style="margin-top: 30rpx;">
							<u-col span="12">
								<!-- 楼主信息 -->
								<u-row>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
									<u-col span="2">
										<u-avatar :src="comm.img"></u-avatar>
									</u-col>
									<u-col span="7">
										<view style="font-size: 35rpx;font-weight: 700">{{comm.createdBy}}</view>
										<view style="font-size: 23rpx; color: #808080;">创建于：{{comm.createDate|datafmt}}</view>
									</u-col>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>

								<!-- 内容摘要 -->
								<u-row>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
									<u-col span="10">
										<text>{{comm.content}}</text>
									</u-col>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>
								
								<!-- 点赞评论信息等 -->
										<u-divider border-color="#999999" :use-slot="false" :half-width="300" height="30"></u-divider>

								<u-row>
									<u-col span="12">
										<u-row>
											<u-col span="6" style="text-align: center;">
												<span>
													<u-icon name="chat"></u-icon><text>{{comm.commentCount}}</text>
												</span>
											</u-col>
											<u-col span="6" style="text-align: center;">
												
												<!-- 评论的点赞 -->
												<span @click="commentlike(comm.id)">
													<u-icon :name="comm.likes|likecommfmt(comm.id,ulike)" :style="comm.likes|colorcommfmt(comm.id,ulike)"></u-icon><text>{{comm.likes}}</text>
												</span>
											</u-col>
										</u-row>
										
									</u-col>
								</u-row>
								
								<u-row>
									<u-divider border-color="#f4f4f5" :use-slot="false" :half-width="800" height="10" bg-color="#f4f4f5">
									</u-divider>
								</u-row>
								
								<!-- 评论列表 -->
								<u-row v-for="(item,index) in comments" :key="index">
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
									<u-col span="10">
										<u-row>

											<u-col span="2">
												<u-avatar v-if="item.img==''?false:true" :src="item.img"></u-avatar>
											</u-col>
											<u-col span="7">
												<view style="font-size: 35rpx;font-weight: 700">{{item.createdBy}}</view>
												<view style="font-size: 23rpx; color: #808080;">创建于：{{item.createDate|datafmt}}</view>
											</u-col>
											<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
										</u-row>
										<u-row>
											<u-col span="12">
												<text>{{item.content}}</text>
												<u-divider border-color="#999999" :use-slot="false" :half-width="300" height="30"></u-divider>
												
												<u-row>
													<u-col span="12" style="text-align: center;">
														<!-- 评论的点赞 -->
														<span @click="commentlike(item.id)">
															<u-icon :name="item.likes|likecommfmt(item.id,ulike)" :style="item.likes|colorcommfmt(item.id,ulike)"></u-icon><text>{{item.likes}}</text>
														</span>
													</u-col>
												</u-row>
												
											</u-col>
										</u-row>
										<u-divider border-color="#f4f4f5" :use-slot="false" :half-width="800" height="10" bg-color="#f4f4f5">
										</u-divider>
									</u-col>
									<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
								</u-row>
								

								
								<u-divider color="#6d6d6d" half-width="200" border-color="#6d6d6d" height="80"
								style="margin-bottom: 100rpx;">我是有底线的</u-divider>
							</u-col>
						</u-row>
								<u-row>
									<u-col>
										<!-- 只能有一个根元素 -->
										<view class="sticky" style="position:fixed;bottom:0;background-color: #19BE6B;">
											<u-row>
												<u-col span="1"><text style="color: #19be6b;">1</text></u-col>
												<u-col span="8"><u-input class="uni-input" v-model="replytext" :value="replytext" name="input" placeholder="  回复楼主" style="background-color: #FFFFFF;border-radius: 30rpx;color: #000000;"/></u-col>
												<u-col span="2"><u-button type="success" @click="replydis" :plain="true" size="mini">发送</u-button></u-col>
												<u-col span="1"><text style="color: #19be6b;">1</text></u-col>
											</u-row>
										</view>
									</u-col>
								</u-row>

					</u-col>
				</u-row>

			</view>

		</scroll-view>
		
		<!-- 转发弹出层 -->
		<view>
			<u-popup v-model="showf" mode="bottom" length="40%">
				<u-row>
					<u-col span="12">
						<u-row>
							<u-col span="2"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="8"><u-divider color="#6d6d6d" half-width="200" border-color="#6d6d6d" height="80"
								style="margin-bottom: 100rpx;">分享给你的好友吧</u-divider></u-col>
							<u-col span="2"></u-col>
						</u-row>
						<u-row>
							<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="2"><u-icon name="weixin-circle-fill" size="100"color="#18b566" @click="weixinshare"></u-icon></u-col>
							<u-col span="2"><u-icon name="moments" size="90" color="#18b566"></u-icon></u-col>
							<u-col span="2"><u-icon name="weibo" size="100" color="#fab6b6"></u-icon></u-col>
							<u-col span="2"><u-icon name="qq-fill" size="100" color="#2979ff"></u-icon></u-col>
							<u-col span="2"><u-icon name="share-fill" size="100" color="#fcbd71" @click="linkshare"></u-icon></u-col>
							<u-col span="1"></u-col>
						</u-row>
						<u-row>
							<u-col span="1"><text style="color: #FFFFFF;">1</text></u-col>
							<u-col span="2" class="centertext">微信</u-icon></u-col>
							<u-col span="2" class="centertext">朋友圈</u-icon></u-col>
							<u-col span="2" class="centertext">微博</u-icon></u-col>
							<u-col span="2" class="centertext">QQ好友</u-icon></u-col>
							<u-col span="2" class="centertext">链接</u-icon></u-col>
							<u-col span="1"></u-col>
						</u-row>
					</u-col>
				</u-row>
			</u-popup>
		</view>
		
				<!-- 点赞弹出层 -->
				<view>
					<u-toast ref="uToast" />
				</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				comments:[],
				comm:"",
				commId:"",
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				ulike:[],
				showf: false,
				replytext:"",
			}
		},
		methods: {
			// 获取点赞
			userlikes(){
				console.log("开始获取点赞");
					uni.request({
						url: this.baseurl+ "cUserlikes/selectAllUserlike?userid="+this.$store.state.userInfo.id,
						data: {
							community: this.$store.state.userInfo.community
						},
						success: res => {
							this.ulike=res.data;
						}
					});
			},
			//分享微信
			weixinshare(){
				uni.share({
					 provider: "weixin",
					    scene: "WXSceneSession",
					    type: 0,
					    href: "http://192.168.10.86:8080/#/" ,
					    title: "uni-app分享",
					    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					    imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					    success: function (res) {
							uni.request({
								url:this.baseurl+"cDiscussion/addshare?id="+this.choseId,
								success: (res) => {
									console.log(res);
								}
								
							});
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
				});
				
				 
			},
			//分享链接
			linkshare(){
				uni.setClipboardData({
					data: this.baseurl+ "#/pages/comm/dessionitem?id="+this.choseId,
					success: (res) => {
						uni.request({
							url:this.baseurl+"cDiscussion/addshare?id="+this.choseId,
							success: (res) => {
								console.log(res);
							}
							
						});
						console.log(res)
						this.showf = false;
					}
				})
				uni.request({
					url:this.baseurl+"cDiscussion/addshare?id="+this.choseId,
					success: (res) => {
						console.log(res);
					}
					
				})
			},
			
			//分享弹窗
			showshare(id) {
				console.log(id);
				// this.baseUrl=window.location.host;
				// console.log(this.baseUrl)
				this.choseId=id;
				this.showf = true;
			},
			
			// 新建回复
			replydis(){
				if(this.replytext==""){
					this.$refs.uToast.show({
						title: '内容不能为空',
						type: 'error'
					})
					return ;
				}
				uni.request({
					url: this.baseurl+ "cComment/addComment",
					data:{
						discusion:this.commId,
						createdBy:this.$store.state.userInfo.name,
						img:this.$store.state.userInfo.headImg,
						status:2,
						likes:0,
						commentCount:0,
						floor:this.comments.length+1,
						content:this.replytext
					},
					method:"POST",
					success: (res) => {
						this.getInitDate(this.commId);
						if(res.data.code==200){
							this.$refs.uToast.show({
								title: '回复成功',
								type: 'success'
							})
							return
						}else{
							this.$refs.uToast.show({
								title: '回复失败，请稍后再试',
								type: 'error'
							})
						}
						
					}
				})

			},
			// 获取初始化数据
			getInitDate(id){
				uni.request({
					url:this.baseurl+"cComment/comment?id="+id,
					success: (res) => {
						if(res.data.code==200){
							this.comm=res.data.result.comment;
							this.comments=res.data.result.comment.comments
						}
					}
				})
			},
			// 评论点赞
			commentlike(id) {
					for (let i = 0; i < this.ulike.length; i++) {
						if(id==this.ulike[i].commentId){
							uni.request({
								url: this.baseurl+ "cUserlikes/userlike",
								data:{
									userId:this.$store.state.userInfo.id,
									discussionId:0,
									commentId:id
								},
								method:"DELETE",
								success: (res) => {
									console.log(res);
									this.userlikes();
									this.getInitDate(this.commId);
								}
							})
							this.$refs.uToast.show({
								title: '取消赞成功',
								type: 'error'
							})
							return
						}
					}
					uni.request({
						url: this.baseurl+ "cUserlikes/userlike",
						data:{
							userId:this.$store.state.userInfo.id,
							discussionId:0,
							commentId:id
						},
						method:"GET",
						success: (res) => {
							console.log(res);
							this.userlikes();
							this.getInitDate(this.commId);
						}
					})
					this.$refs.uToast.show({
						title: '点赞成功',
						type: 'success'
					})

				}	
		},
		
		onLoad(option) {
			console.log(option);
			this.getInitDate(option.id);
			this.commId=option.id;
			this.userlikes();
		},
		filters: {
			datafmt(arg1) {
				var a = arg1 + "";
				return a.substring(5, 10);
			},
			likefmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].discussionId==arg2){
						console.log(arg3[i].discussionId,arg2);
						return "thumb-up-fill"
					}
				}
				return "thumb-up"
			},
			colorfmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].discussionId==arg2){
						console.log(arg3[i].discussionId,arg2);
						return 'color: #18B566;'
					}
				}
				return ""
			},
			likecommfmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].commentId==arg2){
						console.log(arg3[i].commentId,arg2);
						return "thumb-up-fill"
					}
				}
				return "thumb-up"
			},
			colorcommfmt(arg1,arg2,arg3){
				for (let i = 0; i < arg3.length; i++) {
					if(arg3[i].commentId==arg2){
						console.log(arg3[i].commentId,arg2,"判断颜色");
						return 'color: #18B566;'
					}
				}
				return ""
			}
				
		},
		
	}
</script>

<style>
text {
		word-wrap: break-word;
	}

	.sticky {
		width: 750rpx;
		height: 120rpx;
		background-color: #2979ff;
		color: #fff;
		padding: 24rpx;
	}
</style>
